<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-05 18:00:56
 * @LastEditors: zhangziyu
 * @LastEditTime: 2022-11-06 13:40:35
 * @Introduce: 招采问答
-->
<template>
  <div class="questionAnswer" v-loading="loading">
    <el-breadcrumb separator="/" class="navigation">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">乡农问答</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="questionAnswerMain">
      <div class="questionAnswerMainLeft">
        <div class="tabsSearch">
          <div class="tabs">
            <el-tabs v-model="orderType" @tab-click="getPageMH">
              <el-tab-pane label="精彩问答" name="0">
              </el-tab-pane>
              <el-tab-pane label="历史问答" name="1"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="search">
            <el-date-picker
              size="mini"
              style="width:130px"
              placeholder="开始时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              v-model="startDate">
            </el-date-picker>
            <span style="color:#aaaaaa;margin:0px 7px">~</span>
            <el-date-picker
              size="mini"
              style="width:130px"
              placeholder="结束时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              v-model="endDate">
            </el-date-picker>
            <el-input v-model="qContent" size="mini" style="width:130px;margin-left:10px" placeholder="请输入关键字"></el-input>
             <el-button type="primary" size="mini" style="margin-left:10px" @click="getPageMH">搜索</el-button>
          </div>
        </div>

        <div class="typeGroup">
          <div class="typeList" v-for="(item,index) in typeList" :key="index" @click="typeGroupClick(index,item.id)">
            <el-button :type="typeGroupIndex==index?'primary':'text'" round size="mini">{{item.labelName}}</el-button>
          </div>
        </div>
        <div class="questionAnswerContent">
          <div class="questionAnswerList" v-for="(item,index) in questionAnswerList" :key="index">
            <div class="topping" v-show="item.topFlag===1">
              <span>置顶</span>
            </div>
            <div class="questionAnswerTitle">
              <i class="el-icon-question" style="color:#26b000;font-size:20px"></i>
              <span>{{item.qtitle}}</span>
            </div>
            <div class="titleInformation">
              <div class="titleInformationTitle">
                <span v-for="(aitem,aindex) in item.labelList" :key="aindex">{{aitem.labelName}}</span>
                <!-- <span v-show="item.grade">{{item.grade}}</span>
                <span v-show="item.professionalTitleCertificate">{{item.professionalTitleCertificate}}</span> -->
              </div>
              <div class="statistics">
                <span>{{item.createDate}}</span>
                <span>{{item.readNum===null?0:item.readNum}}人阅读</span>
                <span>{{item.interestNum===null?0:item.interestNum}}人关注</span>
              </div>
            </div>
            <div class="expertInformation" v-if="item.allAnswerList.length!==0">
              <div class="expertAvatar">
                <img v-if="item.allAnswerList[0].tbExpertDTO.publicityPhotos===null" src="../../assets/img/zjtj.png" alt="">
                <img v-else :src="item.allAnswerList[0].tbExpertDTO.publicityPhotos" alt="">
              </div>
              <div class="expertIntroduction">
                <div class="expertName">
                  <span>{{item.allAnswerList[0].tbExpertDTO.expertName}}</span>
                  <span v-html="item.allAnswerList[0].acontent"></span>
                </div>
              </div>
            </div>
            <div v-else style="text-align:center;color:#ccc;margin:20px 0;">暂无回答</div>
            <div class="favoriteLikes" v-if="item.allAnswerList.length!==0">
              <div class="favoriteLikesGroup">
                <div class="collection" @click.stop="collectOrNiceAnswer(item.allAnswerList[0].id,0,item.allAnswerList[0].collectFlag)">
                  <img :src="item.allAnswerList[0].collectFlag===0? require('./img/collection1.png'):require('./img/collection2.png')" style="width:20px" alt="">
                  <span :style="{color:item.allAnswerList[0].collectFlag===0?'#AAAAAA':'#f59a23'}">{{item.allAnswerList[0].collectNum===null?0:item.allAnswerList[0].collectNum}}</span>
                </div>
                <div class="likesNumber" @click.stop="collectOrNiceAnswer(item.allAnswerList[0].id,1,item.allAnswerList[0].niceFlag)">
                  <img :src="item.allAnswerList[0].niceFlag===0?require('./img/fabulous1.png'):require('./img/fabulous2.png')" style="width:20px" alt="">
                  <span :style="{color:item.allAnswerList[0].niceFlag===0?'#AAAAAA':'#f59a23'}">{{item.allAnswerList[0].niceNum===null?0:item.allAnswerList[0].niceNum}}</span>
                </div>
              </div>
              <div class="more">
                <el-button type="text" @click="questionAnswerListClick(item.allAnswerList[0].qid)">查看更多</el-button>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
          <div class="pagination">
             <el-pagination
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="questionAnswerMainRight">
        <div class="questionAnswerMainRightContent">
          <div class="consultImmediatelyButton" @click="consultImmediately">
          </div>
          <img src="./img/consultImmediately.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      startDate: '',
      endDate: '',
      qContent: '',
      typeGroupIndex: 0,
      activeName: 'first',
      typeList: [],
      orderType: '0',
      lId: '',
      questionAnswerList: [],
      loading: false
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getAllLabelList()
    },
    typeGroupClick (index, id) {
      this.typeGroupIndex = index
      this.lId = id
      this.getPageMH()
    },
    consultImmediately () {
      this.$router.push({ name: 'consultingService' })
    },
    questionAnswerListClick (qid) {
      this.$router.push({ name: 'rfquestionAnswer', query: { qid } })
    },
    // 获取标签
    getAllLabelList () {
      this.loading = true
      this.$http.get(`xnkt/tblabel/getAllLabelList`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        let arr = res.data
        arr.unshift({ labelName: '全部', id: null })
        this.typeList = arr
        this.lId = res.data[0].id
        this.getPageMH()
      }).catch(() => { this.loading = false })
    },
    // 获取列表数据
    getPageMH () {
      this.loading = true
      let params = {
        orderType: this.orderType,
        page: this.page,
        limit: this.limit,
        qContent: this.qContent,
        startDate: this.startDate,
        endDate: this.endDate,
        lId: this.lId
      }
      this.$http.get(`/xnkt/tbquestionkt/pageMH`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.questionAnswerList = res.data.list
        this.total = res.data.total
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 切换点赞收藏
    collectOrNiceAnswer (id, type, optType) {
      this.loading = true
      if (optType === 0) {
        optType = 1
      } else {
        optType = 0
      }
      this.$http.get(`/xnkt/tbquestionkt/collectOrNiceAnswer/${id}/${type}/${optType}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.getPageMH()
      }).catch(() => { this.loading = false })
    }

  }
}
</script>

<style lang="scss" scoped>
  .navigation{
    padding: 20px 0px;
    .gray{
      color: #C2C6CC;
    }
    .green{
      color:#009B46
    }
  }
  .questionAnswerMain{
    width:1200px;
    margin: auto;
    overflow: hidden;
    /deep/ .el-tabs__nav-wrap::after{
      display: none;
    }
    /deep/ .el-tabs__item{
      font-size: 16px;
      font-weight: bold;
    }
    /deep/ .el-tabs__active-bar{
      height: 2.5px;
    }
    .questionAnswerMainLeft{
      float: left;
      width: calc(100% - 270px);
      .tabsSearch{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tabs{
          width: 200px;
          /deep/ .el-tabs__item:hover{
            color:#26840C
          }
          /deep/ .el-tabs__item.is-active{
            color:#26840C
          }
          /deep/ .el-tabs__active-bar{
            background-color:#26840C
          }
        }
        .search{
          /deep/ .el-button--primary{
            background-color:#26840C;
            border-color:#26840C
          }
        }
      }
    }
    .questionAnswerMainRight{
      float: left;
      width: 270px;
      padding-left: 20px;
      padding-top: 13px;
      .questionAnswerMainRightContent {
        position: relative;
        img{
          width: 250px;
          -webkit-user-drag: none;
        }
        .consultImmediatelyButton{
          cursor: pointer;
          position: absolute;
          width: 177px;
          height: 43px;
          border-radius: 50px;
          left: 50%;
          transform: translate(-51%, 0px);
          bottom: 83px;
        }
      }
    }

    .typeGroup{
      margin-top: 5px;
      .typeList+.typeList{
        margin-left: 10px;
      }
      .typeList{
        display: inline-block;
        /deep/ .el-button--text{
          color: #606266;
        }
        /deep/ .el-button--primary:hover{
          background: #26840C;
        }
        /deep/ .el-button--primary{
          background: #26840C;
          border-color:#26840C
        }
      }
    }
    .pagination{
      text-align: center;
      margin-bottom: 25px;
      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: #26840C;
      }
      /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover{
        color: #26840C;
      }
    }
    .questionAnswerList:hover{
      background-color: rgba(246,251,255,1);
    }
    .questionAnswerList{
      cursor: pointer;
      /deep/ .el-divider--horizontal{
        margin: 7px 0px 20px 0px;
      }
     .topping span{
        display: inline-block;
        padding: 3px 13px;
        background: #26b000;
        color: white;
        font-size: 12px;
     }
     .topping{
      cursor: pointer;
      margin: 15px 0px 7px;
     }
    }
    .questionAnswerTitle{
        display: flex;
        align-items: center;
        margin: 10px 0px;
        span {
          margin-left: 5px;
        }
    }
    .titleInformation{
      margin: 10px 0px;
      .titleInformationTitle{
        span{
          display: inline-block;
          background-color: #aaaaaa;
          padding: 2px 7px;
          font-size: 12px;
          color: white;
          border-radius: 3px;
       }
      }
      .titleInformationTitle span+span{
        margin-left: 5px;
      }
      .statistics span+span{
        margin-left: 15px;
      }
      .statistics span{
        font-size: 12px;
        color: #AAAAAA;
        background-color:#f4f4f4cf;
        padding: 3px;
        border-radius: 3px;
      }
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .expertInformation{
      margin: 15px 0px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .expertAvatar img{
        width: 35px;
      }
      .expertName{
        font-size: 13px;
        line-height: 25px;
        margin-left: 10px;
        color: #AAAAAA;
      }
      .expertName span{
        display: block;
      }
    }
    .favoriteLikes{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .favoriteLikesGroup{
        font-size: 13px;
        color: #AAAAAA;
      }
      .collection{
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        line-height: 10px;
      }
      .likesNumber{
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        line-height: 10px;
        margin-left: 15px;
      }
      .more{
        /deep/ .el-button{
          padding: 0px;
        }
        /deep/ .el-button--text{
          color:#26840C
        }
      }
    }
  }
</style>
